<template>
	<div class="win win-profile" v-if="user">
		<div class="title-wrap">
			<span class="title">
				{{ $t('personal_information') }}
			</span>
		</div>

		<div class="content-wrap">
			<div class="content">
				<div class="form-group">
					<span>{{ $t('username') }}</span>

					<input type="text" disabled="true" :value="user.name">
				</div>

				<div class="form-group">
					<span>{{ $t('nick') }}</span>

					<input type="text" disabled="true" :value="user.nick">
				</div>

				<div class="form-group">
					<span>{{ $t('realName') }}</span>

					<input type="text" disabled="true" :value="user.ext.realName">
				</div>

				<div class="form-group">
					<span>{{ $t('school') }}</span>

					<input type="text" disabled="true" :value="user.ext.school">
				</div>

				<div class="form-group">
					<span>{{ $t('college') }}</span>

					<input type="text" disabled="true" :value="user.ext.college">
				</div>

				<div class="form-group">
					<span>{{ $t('class') }}</span>

					<input type="text" disabled="true" :value="user.ext.class">
				</div>

				<div class="form-group">
					<span>{{ $t('email') }}</span>

					<input type="text" class="email" disabled="true" :value="user.email">

					<a class="btn btn-primary change-email-btn" :title="$t('change_email')" @click="changeEmail">
						<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
					</a>

					<span class="tips" v-if="user.email">
						<template v-if="user.emailVerified">
							{{ $t('verified') }},
							<a class="cursor-pointer" @click="unbind">
								{{ $t('click_me_to_unbind_email') }}
							</a>
						</template>
						<template v-else>
							{{ $t('not_verified') }},
							<a class="cursor-pointer" @click="bind">
								{{ $t('click_me_to_verify_email') }}
							</a>
						</template>
					</span>
				</div>

				<div class="form-group">
					<span>{{ $t('phone') }}</span>

					<input type="text" disabled="true" :value="user.phone">
				</div>
			</div>


			<div class="func-btn-group">
				<RouterLink class="btn btn-success" to="/user/profile/modify">
					{{ $t('edit') }}
				</RouterLink>

				<RouterLink class="btn btn-primary" to="/user/password/change">
					{{ $t('change_password') }}
				</RouterLink>
			</div>
		</div>
	</div>
</template>


<script type="module">
import { UserService } from '@/common/common.object'
import { store } from '@/common/store';

export default {
	data() {
		return {
			store,
		};
	},
	computed: {
		user(){
			return store.user;
		}
	},
	methods: {
		changeEmail() {
			const email = prompt("请输入新邮箱", this.email);
			console.log('email: ', email, ": ", typeof (email));
			console.log('this.email: ', this.email, ": ", typeof (this.email));

			if (this.email != email && (this.email || email)) {
				UserService.changeEmail(email).then(() => {
					alert("修改邮箱成功！");

					this.refresh();
				}).catch(error => alert(`修改邮箱失败: ${error}`));
			}
		},
		bind() {
			if (!this.user.email) return;

			UserService.sendBindEmailVcode().then(() => {
				const vcode = prompt("请输入邮箱验证码");

				if (vcode) {
					UserService.bind(this.user.email, vcode)
						.then(() => {
							alert("绑定成功!");

							this.refresh();
						}).catch(error => alert(`绑定失败: ${error}`));
				}
			});
		},
		unbind() {
			if (!this.user.email) return;

			UserService.sendUnbindEmailVcode().then(() => {
				const vcode = prompt("请输入邮箱验证码");

				if (vcode) {
					UserService.unbind(this.user.email, vcode)
						.then(() => {
							alert("解绑成功!");

							this.refresh();
						}).catch(error => alert(`解绑失败: ${error}`));
				}
			});
		}
	}
}
</script>


<style scoped>
.win {
	margin: 0 auto;
	width: 560px;

	border: 1px solid #337ab7;
	border-radius: 6px;
}

.win>.title-wrap {
	margin-top: 0;
	margin-bottom: 0;
	padding: 10px 15px;

	font-size: 16px;

	border-bottom: 1px solid transparent;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;

	color: #fff;
	background-color: #337ab7;
}

.win>.content-wrap {
	padding: 15px;
}



.win>.content-wrap>.content>.form-group {
	margin-bottom: 15px;
	line-height: 34px;

	font-size: 14px;
}


.win>.content-wrap>.content>.form-group>span {
	display: inline-block;
	margin-right: 8px;
	width: 30%;

	text-align: right;
}

.win>.content-wrap>.content>.form-group input {
	display: inline-block;
	margin-left: 8px;
	padding: 6px 12px;
	width: 60%;
	height: 22px;

	background-color: #eee;
	border: 1px solid #ccc;
	border-radius: 4px;
	opacity: 1;
	box-sizing: content-box;
}


.func-btn-group {
	text-align: center;
}



.func-btn-group .btn {
	margin: 0 0.5rem;
}



.form-group .email {
	width: calc(60% - 44px) !important;
}


.form-group .tips {
	display: block !important;
	margin: 0 0 0 calc(30% + 16px);
	width: auto;
	text-align: left !important;
}

.cursor-pointer {
	cursor: pointer;
}
</style>
